<template>
  <div class="device-online">
    <BaseCharts id="DevOnline" :option="devOnlineOptions" />
  </div>
</template>

<script>
import { getCameraOnline } from '@/api/h3yun'
import BaseCharts from '@/components/charts/base-charts.vue'

export default {
  name: 'DeviceOnline',
  props: {
    areaCode: {
      type: String
    },
  },
  components: {
    BaseCharts
  },
  data() {
    return {
      devOnlineOptions: {}
    }
  },
  watch: {
    areaCode: {
      handler(val) {
        this.initData()
      }
    },
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      let res = await getCameraOnline(this.areaCode)
      let data = res.data || {}
      this.devOnlineOptions = this.getDevOnlineOptions(data.onlineTotal || 0, data.offlineTotal || 0)
    },
    getDevOnlineOptions(onlineCount, offlineCount) {
      // 示例数据
      const totalDevices = onlineCount + offlineCount
      let onlineRate = 0
      let selected = {}
      
      // 设置key名称
      const onlineKey = `在线设备: ${onlineCount}`
      const offlineKey = `离线设备: ${offlineCount}`
      
      if (totalDevices === 0) {
        onlineRate = 0
        selected[`在线设备: 0`] = false
        selected[`离线设备: 0`] = false
      } else {
        onlineRate = ((onlineCount / totalDevices) * 100).toFixed(1)
        selected[onlineKey] = true
        selected[offlineKey] = true
      }
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} ({d}%)'
        },
        grid: {
          top: '0%',
          bottom: '0%',
          left: '0%',
          right: '30%'  // 为右侧图例留出空间
        },
        series: [{
          color: ['#67C23A', '#E6A23C'],
          name: '设备状态',
          type: 'pie',
          top: '-6%',
          bottom: '6%',
          radius: ['58%', '75%'],
          center: ['30%', '50%'],  // 将饼图向左偏移
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 2,
            borderColor: 'blue',
            borderWidth: 1
          },
          label: {
            show: false,
            position: 'center'
          },
          data: [
            {
              value: onlineCount,
              name: onlineKey,
            },
            {
              value: offlineCount,
              name: offlineKey,
            }
          ]
        }],
        title: {
          text: `${onlineRate}%`,
          subtext: `在线率`,
          left: '23%',
          top: '31%',
          textStyle: {
            fontSize: 16,
            color: '#fff',
            fontWeight: 'bold'
          },
          subtextStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        legend: {
          orient: 'vertical',  // 垂直排列
          selected,
          right: '20%',  // 放在右侧
          top: 'center',  // 垂直居中
          textStyle: {
            fontSize: 16,
            height: 25,
            lineHeight: 25,
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 12,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.device-online {
  width: 100%;
  height: 100%;
}
</style>